<script setup>
import CardComponent from "@/components/CardComponent.vue";
import { ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { manageGetAllCategory, manageAddSetMeal, manageGetAllSetMeal } from "@/api/manage";
import { ElMessage } from 'element-plus'
const formValues = ref({
  name: '',
  categoryId: '',
  price: '',
  description: '',
  image: ''
})
const imageShow = ref('')
// 获取分类
const categoryList = ref([])
const getCategoryList = async () => {
  const { result } = await manageGetAllCategory()
  categoryList.value = result.filter(item => item.type === 2)
}
getCategoryList()

const beforeAvatarUpload = (file) => {
  imageShow.value = URL.createObjectURL(file.raw)
  formValues.value.image = file.raw
}

const handleSubmit = async () => {
  const { result } = await manageGetAllSetMeal()
  const setMealName = result.map(item => item.name)
  // 判断是否有数据在添加
  const fd = new FormData()
  if (setMealName.includes(formValues.value.name)) {
    ElMessage.error('套餐名称已存在')
    return
  }
  if (formValues.value.name !== '') {
    fd.append('name', formValues.value.name)
  }
  if (formValues.value.categoryId !== '') {
    fd.append('categoryId', formValues.value.categoryId)
  }
  if (formValues.value.price !== '') {
    fd.append('price', formValues.value.price)
  }
  if (formValues.value.description !== '') {
    fd.append('description', formValues.value.description)
  }
  if (formValues.value.image !== '') {
    fd.append('image', formValues.value.image)
  }
  await manageAddSetMeal(fd)
  ElMessage.success('新增套餐成功')
  formValues.value = {
    name: '',
    categoryId: '',
    price: '',
    description: '',
    image: ''
  }
  imageShow.value = ''

}
</script>

<template>
  <div>
    <el-container>
      <el-header>
        <el-text type="info">
          <h1>新增套餐页面</h1>
        </el-text>
      </el-header>
      <el-main>
        <CardComponent is-need-head card-height="500px" card-width="100%">
          <template #header>
            请填写新增套餐信息
          </template>
          <template #default>
            <el-form :model="formValues">
              <el-form-item label="套餐名称">
                <el-input v-model="formValues.name"></el-input>
              </el-form-item>
              <el-form-item label="套餐类型">
                <el-select placeholder="请选择套餐类型" v-model="formValues.categoryId">
                  <el-option v-for="(item, index) in categoryList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="套餐价格">
                <el-input-number :min="1" v-model="formValues.price"></el-input-number>
              </el-form-item>
              <el-form-item label="套餐描述">
                <el-input autosize type="textarea" v-model="formValues.description"></el-input>
              </el-form-item>
              <el-form-item label="套餐图片">
                <el-upload class="avatar-uploader" :show-file-list="false" :on-change="beforeAvatarUpload"
                  :auto-upload="false">
                  <img v-if="imageShow" :src=imageShow class="avatar">
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
                <el-button type="success" @click="$router.push('/management/package')">返回</el-button>
              </el-form-item>
            </el-form>
          </template>
        </CardComponent>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  background-color: rgb(248, 152, 152);
}

h1 {
  text-align: center;
  height: 100%;
  line-height: 60px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-input-item {
  margin-bottom: 18px;
}

.flavor {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 20px 0;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
